<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button @click="handleView" icon="Back">返回</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Refresh" @click="handleQuery">刷新</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="groupMembersList">
      <el-table-column label="姓名" align="center" prop="stuName" />
      <el-table-column label="学号" align="center" prop="studentID" />
      <el-table-column label="性别" align="center" prop="stuSex" />
      <el-table-column label="班级" align="center" prop="stuClass" />
      <el-table-column label="角色" align="center" prop="roleInGroup" />
      <el-table-column label="年级" align="center" prop="stuGrade" />
      <el-table-column label="加入时间" align="center" prop="joinDate" width="180">
        <template #default="scope">
          <span>{{scope.row.joinDate}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Delete" v-show="cheakRole(scope.row)" @click="handleDelete(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="GroupMembers" lang="ts">
import { listGroupMembers, delGroupMembers } from "@/apis/system/groupMembers";
import { reactive, ref, toRefs } from 'vue'
import router from '@/router'
import { GroupStore } from '@/stores/group'
import { userStore } from '@/stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'
const groupStore = GroupStore()
const groupMembersList = ref([]);
const loading = ref(true);
const ids = ref<number[]>([]);
const total = ref(0);
const userstore= userStore()
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 100000000,
    studentID: null,
    groupID: groupStore.groupInfo.groupID,
    classID: groupStore.groupInfo.classID,
    roleInGroup: null,
    joinDate: null
  },
  rules: {
    studentID: [
      { required: true, message: "学生ID不能为空", trigger: "blur" }
    ],
    groupID: [
      { required: true, message: "小组ID不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询小组成员列表 */
function getList() {
  loading.value = true;
  listGroupMembers(queryParams.value).then(response => {
    if(response.data.code===200){
      groupMembersList.value = response.data.data.records
      total.value = response.data.data.total
    }else {
      ElMessage({ type: 'error', message: response.data.msg })
    }
    loading.value = false;
  });
}

function cheakRole(row:any){
  // 判断是否是管理员
  if(userstore.roleList.includes('admin')){
    return true;
  }
  // 判断是否是当前小组的组长
  if(groupStore.groupInfo.groupLeaderID==userstore.userInfo.studentId){
    return true;
  }
  // 判断是否是当前用户
  return row.studentID == userstore.userInfo.studentId;

}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 返回的按钮操作 */
function handleView() {
  router.push({ path:  groupStore.groupInfo.OriginGroupPath})
}

/** 删除按钮操作 */
function handleDelete(row: any) {
  const _GroupMemberIDs = row.groupMemberID || ids.value;
  var Message = '删除';
  if(row.studentID==userstore.userInfo.studentId){
    Message = '退出小组';
  }
  ElMessageBox.alert('是否确认'+Message+'？', '提示', {
    confirmButtonText: '确定',
    callback: (action: string) => {
      if (action === 'confirm') {
        delGroupMembers(_GroupMemberIDs).then(response => {
          if (response.data.code === 200) {
            ElMessage({ type: 'success', message: Message+'成功' })
            getList()
          }else {
            ElMessage({ type: 'error', message: response.data.msg })
          }
        })
      }
    }
  })
}

getList();
</script>
